<script setup lang="ts">
import {notification} from "ant-design-vue";
import verify from '../verify-component/index.vue'
import {ref} from "vue";
import { message } from 'ant-design-vue';
import useUserStore from '@/store/modules/user.ts'
import {useRouter} from "vue-router";
import type {Rule} from "ant-design-vue/lib/form";

const router = useRouter()
const userStore = useUserStore()
// 输入框对象
const password = ref()
const form = ref()
//其它登陆（手机登陆、微信登陆、QQ登陆）
const otherLogin = (loginType:string)=> {
  notification['warning']({
    message: 'Waring',
    description:
        '该登陆方式暂未开放',
  });
}

//是否显示验证码
const isVerify = ref<boolean>(false)
const key = 'login';
//登陆
const loginModel = ref({
  username: 'admin',
  password: '123456'
})
// 校验规则
const rules: Record<string, Rule[]> = {
  username: [{ required: true,message:'请输入用户名', trigger: 'change' }],
  password: [{ required: true,message:'请输入密码', trigger: 'change' }],
};
const Login = async () => {
  form.value
      .validate()
      .then(() => {
        isVerify.value = true
      })

};
const login = async () => {
  message.loading({ content: '登陆中...', key });
  try {
    // 登录操作
    const loginResult = await userStore.login({
      username: loginModel.value.username,
      password: loginModel.value.password,
      type: 'password'
    });

    if (loginResult.code === 200) {
      // 获取用户信息
      try {
        const infoResult = await userStore.getInfo();
        if (infoResult.code === 200) {
          message.success({ content: '登陆成功', key, duration: 2 });
          await router.push('/');
        } else {
          message.error({ content: infoResult.msg, key, duration: 2 });
          // message.error({ content: '登陆失败', key, duration: 2 });
        }
      } catch (infoError) {
        // 捕获 getInfo 的错误
        message.error({ content: '获取用户信息失败', key, duration: 2 });
        console.error('获取用户信息失败:', infoError);
      } finally {
        isVerify.value = false
      }
    } else {
      message.error({ content: loginResult.msg, key, duration: 2 });
    }
  } catch (loginError) {
    // 捕获 login 的错误
    message.error({ content: loginError.msg || '登录失败', key, duration: 2 });
    console.error('登录失败:', loginError);
  }
}
const setVerify = (value) => {
  isVerify.value = value
}
const toNextInput = (e:any) => {
  if (e.key === 'PageDown') {
    e.preventDefault()
    password.value.focus();
  }
}
</script>

<template>
  <a-form class="form"
          :model="loginModel"
          :rules="rules"
          ref="form">
    <a-form-item name="username" required>
      <a-input placeholder="用户名" v-model:value="loginModel.username" allowClear @keypress.down="toNextInput">
        <template #prefix>
          <user-outlined  style="color: rgb(163, 170, 181)"/>
        </template>
      </a-input>
    </a-form-item>
    <a-form-item name="password">
      <a-input ref="password" type="password" placeholder="密码" show-password v-model:value="loginModel.password" allowClear @keypress.enter="Login">
        <template #prefix>
          <LockOutlined  style="color: rgb(163, 170, 181)"/>
        </template>
      </a-input>
    </a-form-item>
    <div style="display: flex;justify-content: space-between">
      <a-checkbox>记住我</a-checkbox>
      <a>忘记密码</a>
    </div>

    <a-button type="primary" style="width: 100%;margin:20px 0" @click="Login">登陆</a-button>
    <div style="text-align: center;margin-bottom:10px;color: rgb(138, 135, 148)">其他登陆方式</div>
    <div class="other-login">
      <MobileOutlined style="cursor: pointer;" @click="otherLogin('mobileLogin')"/>
      <WechatOutlined style="color: rgb(22, 163, 74);margin: 0 20px;cursor: pointer"
                      @click="otherLogin('wechatLogin')"
      />
      <QqOutlined style="color: rgb(59, 130, 246);cursor: pointer" @click="otherLogin('qqLogin')"/>
    </div>

    <a-modal v-model:open="isVerify"
             :footer="null"
             bodyStyle="padding:5px;"
             class="dialog"
             style="display: flex;">
      <verify
          v-if="isVerify"
          :setVerify="setVerify"
          :verify="login"></verify>
    </a-modal>
  </a-form>
</template>
<style scoped lang="scss">
.dialog{
  display: flex;
  background: linear-gradient(45deg, rgba(255, 126, 95, 0), #ff7e5f, rgba(255, 126, 95, 0)),
  linear-gradient(135deg, rgba(255, 126, 95, 0), #ff7e5f, rgba(255, 126, 95, 0)),
  linear-gradient(225deg, rgba(255, 126, 95, 0), #ff7e5f, rgba(255, 126, 95, 0)),
  linear-gradient(315deg, rgba(255, 126, 95, 0), #ff7e5f, rgba(255, 126, 95, 0));
  background-position: top left, top right, bottom right, bottom left;
  background-size: 50% 50%;
  background-repeat: no-repeat;
}
.form{
  width: 400px;
  //position: absolute;
  //top: 50%;
  //left: 50%;
  //transform: translate(-50% ,-50%);
  .other-login{
    text-align: center;
    font-size: 25px;
  }
}
:deep(.ant-modal .ant-modal-content){
  padding: 5px;
}
</style>
